import React, {useState, useCallback, memo} from 'react';

/**
 * useCallback在什么时候使用?
 * 场景: 在将一个组件中的函数, 传递给子元素进行回调使用时, 使用useCallback对函数进行处理.
 * 
 * 如何优化？  简单理解就是对传入的这个函数做优化
 * useCallback会返回一个函数memoized(记忆的)值。
 * 在依赖不变的情况下，多次定义的时候，返回的值是相同的。
 */

const MyButton = memo((props) => {  //btn1会被重新渲染，因为父组件重新渲染会给increment1重新定义一个新的值，相当于传入btn1每次都是一个新的函数，意味着memo不会起作用。
  console.log("MyButton重新渲染: " + props.title); 
  return <button onClick={props.increment}>MyButton +1</button>
});

export default function CallbackHookDemo02() {
  console.log("CallbackHookDemo02重新渲染");

  const [count, setCount] = useState(0);
  const [show, setShow] = useState(true);

  const increment1 = () => {   
    console.log("执行increment1函数");
    setCount(count + 1);
  }

  //因为increment2依赖count所以不会发生重新定义
  const increment2 = useCallback(
    () => {
      console.log("执行increment2函数");
      setCount(count + 1);
    }, [count]
    );

  return (
    <div>
      <h2>CallbackHookDemo02: {count}</h2>
      {/* <button onClick={increment1}>+1</button>
      <button onClick={increment2}>+1</button> */}
      <MyButton title="btn1" increment={increment1}/>
      <MyButton title="btn2" increment={increment2}/>

      <button onClick={e => setShow(!show)}>show切换</button>
    </div>
  )
}
